.zero {
  position: relative;
}
.zero .logo {
  width: 18%;
  margin: auto;
  margin-top: -30%;
}
.zero .logo img {
  width: 100%;
}
.zero .logo_txt {
  width: 34%;
  margin: auto;
  margin-top: 52%;
  -webkit-animation: go 1.5s linear 0s infinite;
}
.zero .logo_txt img {
  width: 100%;
}
.zero .first_des {
  position: absolute;
  width: 88%;
  text-align: center;
  left: 6%;
  top: 64%;
}
.zero .first_des p {
  font-size: 8vw;
  color: #148FED;
}
.zero .inner_circle {
  position: absolute;
  top: 14%;
  width: 88%;
  left: 58%;
  -webkit-transform: translate(-50%);
}
.zero .inner_circle img {
  width: 100%;
}
.zero .outer_circle {
  position: absolute;
  top: 8%;
  left: 5%;
  width: 90%;
}
.zero .outer_circle img {
  width: 100%;
}
.zero .open {
  position: absolute;
  top: 78%;
  left: 50%;
  -webkit-transform: translate(-50%);
  width: 75%;
  height: 70px;
  margin: 0 auto;
  text-align: center;
  line-height: 70px;
  font-size: 5vw;
  color: #148FED;
  background-image: url(../images/firstpage/btn.png);
  background-repeat: round;
}
.page_01 {
  width: 100%;
  position: relative;
}
.page_01 .top {
  width: 100%;
  height: 44px;
  background-color: #023561;
  border-top: 2px solid #023E70;
  border-bottom: 2px solid #023E70;
  position: relative;
  margin-bottom: 20px;
}
.page_01 .top h3 {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 44px;
  font-size: 5vw;
  color: #148fed;
}
.page_01 .top span {
  position: absolute;
  width: 11px;
  height: 17px;
  top: 13px;
  left: 15px;
  background-image: url(../images/rank/b_arrow.png);
  background-position: center center;
  background-size: cover;
}
.page_01 .first_book {
  width: 40vw;
  height: 48vw;
  background: url("../images/rank/big_%20polygon.png");
  background-repeat: round ;
  margin: auto;
}
.page_01 .first_book img {
  width: 60%;
  margin: auto;
  display: block;
  padding-top: 12%;
}
.page_01 .first_book p {
  font-size: 4vw;
  float: left;
  margin-left: 26%;
  margin-top: 5px;
}
.page_01 .first_book span {
  font-size: 4vw;
  float: left;
  width: 5vw;
  height: 5vw;
  border: 1px solid #FC3737;
  border-radius: 100%;
  background: #A32B32;
  display: block;
  text-align: center;
  line-height: 5vw;
  margin-top: 5px;
}
.page_01 .bot_book {
  position: relative;
}
.page_01 .bot_book .text {
  margin: 3vw auto;
  text-align: center;
  color: #fff;
  font-size: 4vw;
  font-family: 'MyriadPro Regular';
}
.page_01 .bot_book .small2 {
  width: 30vw;
  height: 36vw;
}
.page_01 .bot_book .small3 {
  position: absolute;
  width: 22vw;
  height: 26vw;
  left: 11%;
  top: 5%;
}
.page_01 .bot_book .small3 p {
  font-size: 3vw;
}
.page_01 .bot_book .small3 span {
  width: 4vw;
  height: 4vw;
  line-height: 4vw;
  font-size: 3vw;
}
.page_01 .bot_book .small4 {
  position: absolute;
  width: 24vw;
  height: 28vw;
  top: 0%;
  right: 10%;
}
.page_01 .bot_book .small4 p {
  font-size: 3vw;
}
.page_01 .bot_book .small4 span {
  font-size: 4vw;
  width: 4vw;
  height: 4vw;
  line-height: 4vw;
}
.page_01 .bot_book .small5 {
  position: absolute;
  width: 16vw;
  height: 18vw;
  top: 50%;
  right: 16%;
}
.page_01 .bot_book .small5 p {
  font-size: 1vw;
  margin-left: 2px;
}
.page_01 .bot_book .small5 span {
  font-size: 2vw;
  width: 3vw;
  height: 3vw;
  line-height: 3vw;
}
.page_01 .bot_book .small6 {
  position: absolute;
  width: 18vw;
  height: 22vw;
  top: 41%;
  left: 8%;
}
.page_01 .bot_book .small6 p {
  font-size: 3vw;
}
.page_01 .bot_book .small6 span {
  font-size: 3vw;
  width: 3vw;
  height: 3vw;
  line-height: 3vw;
}
.page_01 .bot_book .small7 {
  position: absolute;
  width: 18vw;
  height: 20vw;
  top: 66%;
  left: 22%;
}
.page_01 .bot_book .small7 p {
  font-size: 2vw;
}
.page_01 .bot_book .small7 span {
  font-size: 2vw;
  width: 3vw;
  height: 3vw;
  line-height: 3vw;
}
.page_01 .bot_book .small8 {
  position: absolute;
  width: 15vw;
  height: 18vw;
  top: 72%;
  left: 60%;
}
.page_01 .bot_book .small8 p {
  font-size: 2vw;
  margin-left: 4px;
}
.page_01 .bot_book .small8 span {
  font-size: 2vw;
  width: 3vw;
  height: 3vw;
  line-height: 3vw;
}
.page_01 .bot_book .small9 {
  width: 14vw;
  height: 16vw;
  margin: auto;
  margin-top: 2vh;
}
.page_01 .bot_book .small9 p {
  font-size: 2vw;
  margin-left: 2px;
}
.page_01 .bot_book .small9 span {
  font-size: 2vw;
  width: 3vw;
  height: 3vw;
  line-height: 3vw;
}
.page_01 .bot_book .small10 {
  width: 12vw;
  height: 15vw;
  position: absolute;
  top: 36%;
  left: 82%;
}
.page_01 .bot_book .small10 p {
  font-size: 1vw;
  margin-left: -3px;
}
.page_01 .bot_book .small10 span {
  font-size: 1vw;
  width: 3vw;
  height: 3vw;
  line-height: 3vw;
}
.two .borders {
  width: 80%;
  height: 14vh;
  border: 1px solid #099D94;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.two .borders .innerborder {
  position: absolute;
  width: 100%;
  height: 101%;
  top: 1vh;
  left: 2vw;
  border: 1px solid #099D94;
  text-align: center;
  line-height: 80px;
}
.two .borders p:nth-of-type(1) {
  padding: 2vh 0;
  font-size: 5vw;
  color: #fff;
}
.two .borders p:nth-of-type(2) {
  font-size: 7vw;
  color: #1BD747;
}
.two .borders p:nth-of-type(2) span {
  font-size: 4vw;
}
.two .bbox {
  margin-top: 6vh;
}
.two .bbox .borrow {
  margin-bottom: 3vh;
}
.two .bbox .borrow li {
  float: left;
  width: 50%;
  height: 16%;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  position: relative;
  padding: 0 10%;
}
.two .bbox .borrow li .b_bg {
  width: 100%;
  background-image: url(../images/borrow/border_bg.png);
  background-repeat: round;
  font-size: 7vw;
}
.two .bbox .borrow li .b_bg .b_title {
  font-size: 4vw;
}
.two .bbox .borrow li .b_bg span {
  color: #C6E421;
}
.two .bbox .borrow li .b_bg span:nth-of-type(2) {
  font-size: 4vw;
}
.two .bbox .borrow .page6-wrap {
  background: red;
  margin: 0 auto;
}
.three {
  width: 100%;
  height: 100%;
  position: relative;
}
.three .outer {
  width: 90%;
  height: 30%;
  margin: 10px 0;
  margin-left: 15px;
  border: 2px solid #036AC0;
  position: relative;
}
.three .outer .inner {
  width: 101%;
  height: 102%;
  margin-left: 8px;
  margin-top: 8px;
  border: 2px solid #036AC0;
  position: absolute;
}
.three .outer img {
  height: 100%;
  margin-top: 1vh;
  margin-left: 1vw;
}
.three .pernum {
  position: relative;
  margin-top: 25px;
  display: flex;
  justify-content: space-around;
  color: #fff;
  margin-bottom: 10px;
}
.three .pernum .numone,
.three .pernum .numtwo,
.three .pernum .numthree {
  margin: 0 45px;
  width: 15px;
  height: 25vh;
  background-color: #192C5C;
  border-radius: 6px;
  position: relative;
}
.three .pernum .numone .count1,
.three .pernum .numtwo .count1,
.three .pernum .numthree .count1,
.three .pernum .numone .count2,
.three .pernum .numtwo .count2,
.three .pernum .numthree .count2,
.three .pernum .numone .count3,
.three .pernum .numtwo .count3,
.three .pernum .numthree .count3 {
  position: absolute;
  z-index: 999;
}
.three .pernum .numone .bar1,
.three .pernum .numtwo .bar1,
.three .pernum .numthree .bar1,
.three .pernum .numone .bar2,
.three .pernum .numtwo .bar2,
.three .pernum .numthree .bar2,
.three .pernum .numone .bar3,
.three .pernum .numtwo .bar3,
.three .pernum .numthree .bar3 {
  position: absolute;
  z-index: 888;
  width: 100%;
  height: 25%;
  border-radius: 6px;
  background-color: #163D72;
  bottom: 0;
  left: 0;
}
.three .pernum .numone .bar3,
.three .pernum .numtwo .bar3,
.three .pernum .numthree .bar3 {
  height: 75%;
}
.three .pernum .numone .count1,
.three .pernum .numtwo .count1,
.three .pernum .numthree .count1,
.three .pernum .numone .count2,
.three .pernum .numtwo .count2,
.three .pernum .numthree .count2 {
  width: 76px;
  height: 45px;
  line-height: 30px;
  text-align: center;
  background: url(../images/count/striangle.png);
  background-size: 76px 45px;
  bottom: 25%;
  left: 50%;
  -webkit-transform: translate(-50%);
}
.three .pernum .numone .count3,
.three .pernum .numtwo .count3,
.three .pernum .numthree .count3 {
  width: 95px;
  height: 45px;
  line-height: 30px;
  text-align: center;
  background: url(../images/count/striangle.png);
  background-size: 95px 45px;
  top: 15%;
  left: 50%;
  -webkit-transform: translate(-50%);
}
.three .des {
  display: flex;
  justify-content: space-around;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 2vh;
}
.three .totalPer {
  color: #fff;
  font-size: 18px;
}
.three .totalPer p {
  margin-left: 30px;
}
.three .totalPer .box {
  width: 100%;
  padding: 0 20px;
  margin-top: 2vh;
}
.three .totalPer .box .rectangle_bg {
  width: 100%;
  height: 30px;
  position: relative;
  background-color: #192C5C;
  border-radius: 8px;
}
.three .totalPer .box .rectangle_bg .rectangle {
  height: 100%;
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 15px;
  padding-left: 10px;
  background: url(../images/count/rectangle.png);
}
.three #progress {
  width: 100%;
  height: 3rem;
  margin: 0 auto;
  background: #282e52;
  position: absolute;
  bottom: 7.3333rem;
}
.three .kedu {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 1rem;
}
.three .processbar {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 0px;
  border-radius: 4px;
  background: -webkit-linear-gradient(left, #4aa0d7, #dc9472);
  /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #4aa0d7, #dc9472);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #4aa0d7, #dc9472);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #4aa0d7, #dc9472);
  /* 标准的语法 */
}
.four .banner_bg1 {
  margin: auto;
  width: 76%;
  height: 67%;
  padding: 5vh 3vw 8vh 3vw;
  background: url(../images/recommend/banner_bg.png);
  background-repeat: round;
}
.four .banner_bg1 .bg_pic {
  height: 100%;
}
.four .banner_bg1 p {
  text-align: center;
  font-size: 6vw;
}
.four .banner_des {
  width: 60%;
  margin: auto;
  margin-top: 2vw;
  padding: 1vw 0;
  font-size: 4vw;
  text-align: center;
  vertical-align: middle;
}
.four .banner_des span:nth-of-type(2) {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin: 0 3vw;
  text-shadow: 0 0 10px #fff;
  background-image: url(../images/recommend/num_bg.png);
  background-repeat: round;
}
.star .allstar {
  width: 90%;
  margin: auto;
  border: 1px solid #01302f;
}
.star .allstar ul li {
  text-align: center;
  position: relative;
  padding: 1vh 5%;
  border-bottom: 1px solid #01302f;
}
.star .allstar ul li .s_head {
  width: 30%;
  margin: auto;
}
.star .allstar ul li .s_head img {
  width: 100%;
}
.star .allstar ul li .s_rank {
  width: 55%;
  height: 5vh;
  margin: 0.5vh auto;
  line-height: 5vh;
  background-image: url(../images/star/red_sbg.png);
  background-repeat: round;
}
.star .allstar ul li p {
  text-align: center;
  font-size: 3vw;
  color: #789dd9;
}
.star .allstar ul li .p_bg {
  width: 16%;
  height: 3.2vh;
  line-height: 3.2vh;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../images/star/red_bg.png);
  background-repeat: round;
}
.star .allstar ul li:nth-of-type(2) .s_rank {
  background-image: url(../images/star/yellow_sbg.png);
}
.star .allstar ul li:nth-of-type(2) .p_bg {
  background-image: url(../images/star/yellow_bg.png);
}
.star .allstar ul li:nth-of-type(3) {
  border-bottom: none;
}
.star .allstar ul li:nth-of-type(3) .s_rank {
  background-image: url(../images/star/green_sbg.png);
}
.star .allstar ul li:nth-of-type(3) .p_bg {
  background-image: url(../images/star/green_bg.png);
}
.five .notice_con {
  height: 66%;
  overflow: hidden;
  position: relative;
}
.five .notice_con .other {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.five .notice_con .other .longline {
  position: absolute;
  height: 100%;
  border: 1px solid #3970D5;
  top: 3%;
  left: 20%;
  z-index: -9999;
  opacity: 0.3;
}
.five .notice_con .other .longline::before,
.five .notice_con .other .longline::after {
  /*1.一定设置content属性*/
  content: "";
  /*2.如果需要设置宽度就应该转换其为块级元素，它默认是行级元素  float  display  position*/
  position: absolute;
  left: -3px;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  border: 1px solid #3970D5;
}
.five .notice_con .other .longline::before {
  top: -7px;
}
.five .notice_con .other .longline::after {
  bottom: -6px;
  border: 1px solid #3970D5;
}
.five .notice_con .other li {
  text-align: center;
  width: 90%;
  margin: 3vh auto;
}
.five .notice_con .other li .notice_date {
  float: left;
  margin-top: 8vw;
  color: #dce6f7;
}
.five .notice_con .other li .contact_icon {
  display: block;
  float: left;
  width: 22px;
  height: 20px;
  background-image: url(../images/notice/icon.png);
  background-repeat: round;
  margin-top: 7vw;
  margin-left: 3vw;
}
.five .notice_con .other li .contact_line {
  display: block;
  float: left;
  margin-top: 2vw;
  margin-left: 3vw;
  color: #dce6f7;
}
.five .notice_con .other li .contact_line span {
  display: inline-block;
  width: 18vw;
  height: 5px;
  background-image: url(../images/notice/mline.png);
  background-repeat: round;
}
.five .notice_con .other li .notice_con {
  display: block;
  float: right;
  width: 50%;
  background-image: url(../images/notice/middle_frame.png);
  background-repeat: round;
  padding: 4vw 5vw 4vw 7vw;
  text-align: center;
  margin-right: 1vw;
}
.five .notice_con .other li .notice_con h3 {
  width: 100%;
  color: #80A7E7;
  font-size: 3vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.five .notice_con .other li .notice_con p {
  width: 100%;
  color: #77878B;
  font-size: 1vw;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}
.five .notice_con .other li:first-child .contact_icon {
  margin-top: 8vw;
}
.five .notice_con .other li:first-child .contact_line {
  margin-top: 6vw;
  margin-left: 1vw;
  color: #dce6f7;
}
.five .notice_con .other li:first-child .contact_line p {
  margin-bottom: -3vw;
}
.five .notice_con .other li:first-child .contact_line span {
  width: 20vw;
  height: 5vw;
  background-image: url(../images/notice/top_line.png);
  background-repeat: round;
}
.five .notice_con .other li:first-child .notice_con {
  width: 51%;
  position: relative;
  background-image: url(../images/notice/first_frame.png);
}
.five .notice_con .other li:first-child .notice_con .new_icon {
  position: absolute;
  width: 30px;
  height: 20px;
  background-image: url(../images/notice/new.png);
  background-repeat: round;
  top: 1px;
  left: 12px;
}
.five .notice_con .other li:first-child .notice_con h3 {
  color: #0479D8;
}
.five .notice_con .other li:first-child .notice_con p {
  color: #C8E547;
}
.five .notice_con .other li:last-child .contact_line span {
  height: 6vw;
  width: 52px;
  margin-top: 2vw;
  background-image: url(../images/notice/bottom_line.png);
  background-repeat: round;
}
.five .notice_con .other li:last-child .notice_con {
  width: 52%;
  background-image: url(../images/notice/last_frame.png);
}
.noticelist .top {
  margin-bottom: 40px;
}
.noticelist .list {
  width: 80%;
  padding: 3vw;
  margin: auto;
  background-image: url(../images/noticelist/fborder.png);
  background-repeat: round;
}
.noticelist .list .listitle {
  width: 69%;
  height: 7vh;
  font-size: 4vw;
  line-height: 6vh;
  margin: 0 auto;
  padding: 0 3vw;
  color: #148fed;
  background-image: url(../images/noticelist/fborder_bg.png);
  background-repeat: round;
  margin-top: -10vw;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}
.noticelist .list .listcon {
  padding: 2vw 3vw;
  text-align: center;
}
.noticelist .list .listcon .botline {
  width: 60%;
  text-align: center;
  border-bottom: 1px solid #dce6f7;
  padding-bottom: 10px;
  margin: 0 auto;
  margin-bottom: 3vh;
}
.noticelist .list .listcon .botline span {
  display: inline-block;
  color: #dce6f7;
  font-size: 3vw;
}
.noticelist .list .listcon p {
  overflow: hidden;
  color: #80A7E7;
  font-size: 4vw;
  text-indent: 6vw;
}
